<template>
    <div class="pageSty">
        <div class="flex_btn">
            <div>
                <div class="nameSty">{{ releaseData.requireTitle }} <span style="color: red;font-size: 14px;">( {{ releaseData.statusName }} )</span></div>
                <div class="titSty">
                    <!-- <span>类型：</span>
                    <span style="margin-right: 60px;font-size: 14px;">3D建模</span> -->
                    <span>总预算：</span>
                    <span style="color: red;font-size: 14px;">￥{{ releaseData.generalBudget }}</span>
                    <span>距需求截止时间：</span>
                    <span style="color: red;font-size: 14px;">{{ releaseData.remainingTime }}</span>
                </div>
            </div>
            <div class="userBox flex_str_clon">
                <img :src="releaseData.headImageUrl" class="userImgSty">
                <div>
                    <div style="font-size: 20px;">{{ releaseData.authorNickname }}</div>
                    <div>发单数: 1</div>
                    <!-- <div>QQ号: {{ releaseData.qq }}</div> -->
                    <div>手机号:{{ releaseData.mobile }}</div>
                    <div>微信号:{{ releaseData.weChat }}</div>
                </div>
            </div>
        </div>
        <div class="flex_end">
            <div v-show="isAuth" class="editSty" @click="editRelease">修改任务</div>
        </div>
        <div class="flex_btn">
            <img :src="releaseData.coverImageUrl" class="detImgSty">
            <div class="flex_btn">
                <div v-for="(item, index) in kefu" :key="index" style="text-align: center;">
                    <img :src="item.imagePath" class="kefuImgSty">
                    <div>{{ item.name }}</div>
                </div>
            </div>
        </div>
        <div>需求详情：{{ releaseData.requireDetail }}</div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getReleaseDetailApi, getUserInfoApi, getKeFuImgApi } from '@/api/index/index'
import { useRouter } from 'vue-router';
import { piniaData } from '@/pinia/index'
const piniaState = piniaData()
const router = useRouter()
const releaseData = ref<any>({})
const userInfo = ref<any>({})
const isAuth = ref(false)
const kefu = ref<any>([])
const getKeFu = () => {
    getKeFuImgApi().then((res: any) => {
        kefu.value = res.data
    })
}
const getDetail = () => {
    getReleaseDetailApi({ id: router.currentRoute.value.query.id }).then((res: any) => {
        releaseData.value = res.data
        getUserInfo(res.data)
    })
}

const getUserInfo = (val: any) => {
    getUserInfoApi().then((res: any) => {
        userInfo.value = res.data
        if (val.mobile == res.data.mobile) {
            isAuth.value = true
        }
    })
}
const editRelease = () => {
    piniaState.$patch({
        releaseInfo: releaseData.value
    })
    router.push({ name: 'Release', path: '/money/release' })
}

onMounted(() => {
    getDetail()
    getKeFu()

})
</script>

<style scoped>
.kefuImgSty {
    width: 150px;
    margin: 0 20px;
}

.editSty {
    padding: 6px 14px;
    background-color: #FF8D1C;
    border-radius: 4px;
    color: #fff;
}

.detImgSty {
    width: 500px;
}

.userImgSty {
    width: 80px;
    margin-right: 18px;
    border-radius: 40px;
}

.nameSty {
    margin-top: 100px;
    margin-bottom: 30px;
    font-size: 24px;
    width: 600px;
}

.titSty {
    font-size: 20px;
}

.pageSty {
    width: 86%;
    margin-left: 7%;
    margin-top: 40px;
    min-height: 500px;
    background-color: #fff;
    padding: 20px 40px;
}

.userBox {
    /* width: 300px; */
    height: 160px;
    border: 1px solid #ccc;
    font-size: 16px;
    padding: 18px;
}</style>